<template>
  <div class="sidebar-right" ref="d3CanvasRef" style="height: 77vh; width: 100%;">
    <svg class="d3CanvasSvg"></svg>
  </div>
  <div style="margin-top:5px;">请输入最大深度： <el-input-number v-model="depth"></el-input-number></div>
</template>
<script setup >
import * as d3 from "d3";
import { onMounted, watch } from "vue";
import { initChart, appendAxis, appendZoom, appendGrid } from "@/api/canvas.ts";
import { initOpenHole } from "@/api/openHole"
import openHoleStore from '@/store/modules/openHoleDraw'
import d3DrawStore from '@/store/modules/d3Draw'
const emit = defineEmits(["click", "dom", "render"]);
const d3Store = d3DrawStore()
const drawOpenHole = openHoleStore()
const d3CanvasRef = ref(null)
const selectedDom = ref(null)
const depth = ref(1765)
//最大深度
watch(depth, (newVal, oldVal) => {
  let $ = initChart(d3.selectAll(".d3CanvasSvg"), d3CanvasRef.value.offsetWidth, d3CanvasRef.value.offsetHeight - 5);
  d3.selectAll("g").remove();
  appendAxis($, "y", "right", newVal);
});

onMounted(() => {
  //执行画布初始化 -- 并且返回 dom
  let $ = initChart(d3.selectAll(".d3CanvasSvg"), d3CanvasRef.value.offsetWidth, d3CanvasRef.value.offsetHeight - 5);
  d3Store.set$($)
  d3Store.setCanvas(d3CanvasRef.value)
  emit('render')
  // 新增缩放规则
  appendZoom($, 1, 60);
  // 初始化坐标轴 Y
  appendAxis($, "y", "right", depth.value);
  // 新增网格线
  appendGrid($, 10);

  if (drawOpenHole.openHole == null ) { drawOpenHole.openHole = initOpenHole($, d3Store.d3Canvas ,60, 0 ,depth.value ); }
});

defineExpose({
  $: selectedDom,
});
</script>

<style scoped>
.sidebar-right {
  flex: 0 0 50%;
  background-color: rgb(250, 250, 250);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
}

.sidebar-right:hover {
  border-color: rgba(0, 0, 0, 0.5);
}
</style>